<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Tabs name="main_tabs_child" size="small">
          <TabPane tab="main_tabs_child" label="基础配置">
            <Collapse value="0">
              <Panel>
                常规配置
                <div slot="content">
                  <EchartsGridConfigForm v-model="chartOption.grid"></EchartsGridConfigForm>
                </div>
              </Panel>
              <Panel>
                柱条配置
                <div slot="content">
                  <Form :label-width="80">
                    <FormItem label="图形类型">
                      <Input type="textarea" :rows="4" v-model="chartOption.series.symbol"/>
                    </FormItem>
                    <FormItem label="颜色">
                      <Tooltip content="此处配色会覆盖渐变色配置" placement="left">
                        <PnColorPicker size="small" v-model="chartOption.series.itemStyle.color" alpha recommend/>
                      </Tooltip>
                    </FormItem>
                    <FormItemPanel title="渐变色">
                      <FormItem label="起始颜色">
                        <PnColorPicker size="small" v-model="chartOption.series.itemStyle.startColor" alpha recommend/>
                      </FormItem>
                      <FormItem label="结束颜色">
                        <PnColorPicker size="small" v-model="chartOption.series.itemStyle.endColor" alpha recommend/>
                      </FormItem>
                    </FormItemPanel>
                    <FormItemPanel title="值标签">
                      <FormItem label="显示">
                        <i-switch v-model="chartOption.series.label.show"></i-switch>
                      </FormItem>
                      <FormItem label="位置">
                        <Select :transfer="true" size="small" v-model="chartOption.series.label.position">
                          <Option v-for="item in $PnChartDict.positions" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                      </FormItem>
                      <FormItem label="格式化">
                        <Input size="small" v-model="chartOption.series.label.formatter"/>
                      </FormItem>
                      <FormItem label="颜色">
                        <PnColorPicker size="small" v-model="chartOption.series.label.color" alpha recommend/>
                      </FormItem>
                      <FormItem label="字体大小">
                        <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.series.label.fontSize" :active-change="false"></InputNumber>
                      </FormItem>
                    </FormItemPanel>
                  </Form>
                </div>
              </Panel>
              <Panel>
                x轴
                <ShowToggle class="float-right" v-model="chartOption.xAxis.show"></ShowToggle>
                <div slot="content">
                  <EchartsXAxisConfigForm v-model="chartOption.xAxis"></EchartsXAxisConfigForm>
                </div>
              </Panel>
              <Panel>
                y轴
                <ShowToggle class="float-right" v-model="chartOption.yAxis.show"></ShowToggle>
                <div slot="content">
                  <EchartsYAxisConfigForm v-model="chartOption.yAxis"></EchartsYAxisConfigForm>
                </div>
              </Panel>
              <Panel>
                提示框
                <ShowToggle class="float-right" v-model="chartOption.tooltip.show"></ShowToggle>
                <div slot="content">
                  <EchartsTooltipConfigForm v-model="chartOption.tooltip"></EchartsTooltipConfigForm>
                </div>
              </Panel>
              <Panel v-if="chartOption.title">
                标题
                <ShowToggle class="float-right" v-model="chartOption.title.show"></ShowToggle>
                <div slot="content">
                  <EchartsTitleConfigForm v-model="chartOption.title"></EchartsTitleConfigForm>
                </div>
              </Panel>
              <Panel>
                其他
                <div slot="content">
                  <EchartsOtherConfigForm v-model="compConfigData"></EchartsOtherConfigForm>
                </div>
              </Panel>
            </Collapse>
          </TabPane>

        </Tabs>

      </TabPane>
      <TabPane name="extend_tab" tab="main_tabs" label="扩展配置">
        <Container v-if="mainTabsValue == 'extend_tab'">
          <CustomOptionDocument :componentId="id"></CustomOptionDocument>
          <CodeEditor v-model="customOption" mode="json"></CodeEditor>
          <EchartsSpreadingCodeForm v-model="echartsSpreadingCode"></EchartsSpreadingCodeForm>
        </Container>
      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="TriangleBarChart"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">

          <!--如果组件不需要支持内置交互流接收权限，可以删除下面这个组件InteractionReceive-->
          <InteractionReceive></InteractionReceive>

          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

          <FormItemPanel title="数据项点击时运行">
            <InteractionSender :interactionKey="'itemClick'"></InteractionSender>
            <Alert style="padding: 5px;">此脚本中，使用_this指向当前组件vm实例，通过params可获取点击项数据</Alert>
            <CodeEditor v-model="dataItemClickJsCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'TriangleBarChartForm', // 此名称必须填写，且必须与组件文件名相同，并且必须加上Form字符
    mixins: [FuncCompFormMixin],
    data() {
      return {}
    },
    mounted() {

    },
    methods: {},
    computed: {
      ...mapFields({

        chartOption: 'component.compConfigData.chartOption'

      })
    }
  }
</script>

<style scoped>

</style>
